

<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="Shortcut Icon" href="http://htmljs.b0.upaiyun.com//images/logo.ico?123"><link href="http://htmljs.b0.upaiyun.com//images/logo.ico?123" rel="shortcut icon" type="image/x-icon"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable = no"/>
<link href="http://htmljs.b0.upaiyun.com//images/icon.png" rel="apple-touch-icon"/>
<meta name="keywords" content="前端, 前端开发, web前端, web前端开发, 前端开发工程师, 前端开发攻城师,设计, 开发, 前端资源, CSS, JavaScript, Ajax, jQuery, html,html5,css3,浏览器兼容, 前端开发工具, 前端招聘, jQuery API, CSS整形和优化工具 , JS压缩工具 , JS格式化工具 , CSS参考手册 ,HTML参考手册 , 多重搜索 , nodejs , node , boostrap , sublime"/>
<script>if($.browser.msie){alert("请不要使用ie浏览本站！本站不支持ie10以下浏览器。")}</script><title>乱炖周刊第6期 - 每周为您推送本站精选的新鲜速递</title><base target="_blank"/><meta name="description" content="前端乱炖每周会为您推送本站精选的新鲜速递。">
<style>
img{
  max-width:100%;
}
p{
  margin:10px 0;
}
a{
  text-decoration: none;
  color:#56b38e;
  font-weight: bold;

}
html,body{margin:0;background: #fefefe;font-size: 14px;color:#444;}
*{
    font-family: helvetica, "Microsoft Yahei", sans-serif;
}
a:hover{
  text-decoration: underline;
}
@media screen and (min-width:100px) and (max-width:650px){
  table{
    width:100% !important;
  }
  body{
    margin:0 5px;
  }
  .wrapper,.tip,.title{width:100% !important;overflow: hidden;}
  #googlead{display: none !important;}
  #wx img{width:50%;}
  #WBCommentFrame{
    display: none;
  }
  
}
</style>
</head>

<body>
  <div style="height:40px;background:#eee;color:#fff;line-height:40px;border-bottom:1px solid #ccc;margin:0 -5px;">
    <div style="width: 600px;margin:0 auto;" class="wrapper">
      <a href="http://www.html-js.com" style="color:#333;">前端乱炖官网</a>
      <a href="http://www.html-js.com/static/htmljs-weekly-5.html" style="padding:0 10px;color:#333;">上一期</a>
    </div>
  </div>
  <div id="newsletter" style="margin:0;padding:0; color: #333333; font: 13px/20px 'Helvetica Neue',Helvetica,Arial,Sans-serif;font-family:'Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Helvetica,Arial,sans-serif!important;overflow:hidden;" >
    <div class="wrapper" style="margin: 0px auto 0; width: 600px; padding-top:16px; padding-bottom:10px;">
      <div class="header clearfix" style="font-weight:bold;text-align:left;margin:10px 0;margin-top:20px;font-size:35px;color:#333;padding:0px;line-height: 43px;height:43px;">乱<img alt="炖" width="40" height="40" style="vertical-align: middle;margin-top:-8px;margin-left:5px;margin-right:5px;" src="http://htmljs.b0.upaiyun.com/uploads/1411395057234-%E6%9C%AA%E6%A0%87%E9%A2%98-4.png"/>周刊 第六期</div>
      <div style="color:#999;font-size:12px;padding-left:0px;line-height:45px;">主编：芋头</div>
      <a href="https://coding.net/u/zengsha/p/Onion-Monkey-Emoji/topic/4272?hmsr=%E4%B9%B1%E7%82%96%E7%BD%91&hmmd=%E6%96%87%E5%AD%97&hmpl=&hmkw=&hmci=" target="_blank" style="border:1px solid #ddd;display:block;"><img alt="Coding.net 让你体验云端开发的快感！创意表情火热征集中！" src="http://htmljs.b0.upaiyun.com/uploads/1411395323987-codenet.jpg"/></a>
      <div style="">
        <div style="padding:0px;">
          <p style="font-size:13px;color:#666;">乱炖周刊 是 <a href="http://www.html-js.com" target="_blank">前端乱炖</a> 网站推出的前端技术信息推送产品。我们会每周为您提供最新最有含量的内容推送，如果您有兴趣，欢迎订阅周刊。
          </p>
          <div style="float:left;margin-right:40px;">
          <p style="font-size:14px;margin-top:20px;color:#489275">订阅 乱炖周刊：</p>
          <p style="font-size:13px;">
            <input type="text" id="email" name="email" placeholder="输入常用邮箱地址" style="height:20px;width:200px;"/>
            <button id="submit" type="button" style="height:25px;vertical-align:1px;">订阅</button>
          </p>
        </div>
        <div style="float:left;">
          <p style="font-size:14px;margin-top:20px;color:#489275;">推荐给朋友：</p>

          <p style="font-size:13px;">
            <a href="http://service.weibo.com/share/share.php?appkey=659341943&url=http://www.html-js.com/static/htmljs-weekly-6.html&pic=http://htmljs.b0.upaiyun.com/uploads/1411439791769-example.png&title=《乱炖周刊》第6期新鲜出炉啦，《乱炖周刊》是@前端乱炖 网站推出的前端精品文章推送产品，每周为您多渠道推送营养文，前端必备，推荐订阅。戳右边查看在线版→_→" target="_blank" title="分享到微博"><img src="http://htmljs.b0.upaiyun.com/uploads/1393254783476-button1.png" style="width:110px;margin-left:-8px;margin-top:-3px;"/>
            </a>
          </p>
        </div>
        </div>
      </div>
    </div>
  </div>
  <div class="title" style="font-size:14px;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-bottom:1px solid #ddd;line-height:30px;margin-top:20px;padding-left:5px;color:#888;">前端乱炖·精品原创专栏</div>

  <div id="newsletter" >
      <div style="background: #f8f8db;font-size: 13px;width:600px;margin:0 auto;margin-top: 5px;color:#666;" class="tip"><div style="padding:10px;">每个乱炖专栏都是一系列原创文章的合集，我们希望能够提供一个展示和分享的平台，同时也让初学者能够系统学习前端知识。感谢每位作者的辛勤付出、无私奉献！</div></div>
  <div style="margin: 0px auto 0; width: 600px;padding-top:20px;"  class="wrapper">

    <div class="title" style="font-size:20px;line-height:30px;padding-top:20px;">
        <a href="http://www.html-js.com/article/column/150" style="color:#444;">Node.js之撸（29）</a>
    </div>
    <div style="color:#777;font-size:13px;padding:0px;margin:10px 0;margin-top:5px;">让我们走上一条Node.js之撸吧！作者简直把Nodejs玩坏了要，各种奇怪的应用，而且作者还是个二次元控，文风简直萌萌哒！</div>
      <div class="title" style="font-size:20px;line-height:30px;padding-top:20px;">
          <a href="http://www.html-js.com/article/column/234" style="color:#444;">Avalon学习教程（20）</a>
      </div>
      <div style="color:#777;font-size:13px;padding:0px;margin:10px 0;margin-top:5px;">从零开始学习到掌握当前国内最强大的MVVM框架avalon！write by 年薪百万的司徒正妹大大。用大量篇幅讲述了avalon这个mvvm框架，涉及到很多原理性知识，非常干活！</div>
      <div class="title" style="font-size:20px;line-height:30px;padding-top:20px;">
          <a href="http://www.html-js.com/article/column/222" style="color:#444;">Css研究（9）</a>
      </div>
      <div style="color:#777;font-size:13px;padding:0px;margin:10px 0;margin-top:5px;">很喜欢这个前端论坛~所以在自己博客的每一篇原创文章都会在这边跟大家分享一下，暂定就这么多，纯粹的爱好者。</div>
      <div class="title" style="font-size:20px;line-height:30px;padding-top:20px;">
          <a href="http://www.html-js.com/article/column/203" style="color:#444;">Amaze UI 小分队（6）</a>
      </div>
      <div style="color:#777;font-size:13px;padding:0px;margin:10px 0;margin-top:5px;">Amaze UI 妹子UI是国内最好用最漂亮技术最先进的UI框架，完全免费，功能比Bootstrap更强大。</div>
      <div class="title" style="font-size:20px;line-height:30px;padding-top:20px;">
          <a href="http://www.html-js.com/article/column/136" style="color:#444;">菜鸟解读 jQuery（34）</a>
      </div>
      <div style="color:#777;font-size:13px;padding:0px;margin:10px 0;margin-top:5px;">本栏解读的jQ为1.7.2版本。 本人也是刚开始读起源码，在这里分享下成长的心得。 本人能力有限，也是接触JS不久的初学者，定会有不少解析不全不够明朗【甚至BUG】的地方， 希望各位牛牛多多留言斧正 感谢阅读 ps:由于工作不定时繁忙，本人也无法定期更新,但是会尽量抽时间学习,分享给大家</div>
      <div class="title" style="font-size:20px;line-height:30px;padding-top:20px;">
          <a href="http://www.html-js.com/article/column/183" style="color:#444;">Javascript描述数据结构和算法（6）</a>
      </div>
      <div style="color:#777;font-size:13px;padding:0px;margin:10px 0;margin-top:5px;">用javascript描述数据结构和算法，老话题，新思路。</div>

    <a href="http://www.html-js.com/article" style="line-height:30px;font-size:12px;color:#333;text-decoration:underline;">创建我自己的专栏</a>
  </div>
</div>
  <div class="title" style="font-size:14px;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-bottom:1px solid #ddd;line-height:30px;margin-top:20px;padding-left:5px;color:#888;">前端乱炖·精品站内原创文章</div>

  <div id="newsletter" >
  <div style="margin: 0px auto 0; width: 600px;padding-top:20px;" class="wrapper">
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
        <a href="http://www.html-js.com/article/Big-search-team-columns-at-the-front-end-of-the-car" style="display:inline-block;width:450px;">
            [ 记mobile web曾经的踩过坑 ]
        </a>
        <span style="display:inline-block;font-size:14px;float:right;">  by 飞天小黑神猪</span>
    </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/Cross-domain-local-storage-scheme-for-postMessage-and-localStorage-based-on-JavaScript-technique" style="display:inline-block;width:450px;">
              [ 基于 postMessage 和 localStorage 的跨域本地存储方案 ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by 阿安</span>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/Using-Reactjs-to-develop-web-applications-using-Reactjs-components-as-Backbonejs-view" style="display:inline-block;width:450px;">
              [ 使用React.js组件作为Backbone.js视图 ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by 张小俊128</span>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/Regularjs-Chinese-guidelines-teach-you-step-by-step-to-achieve-a-todomvc-based-on-Regularjs" style="display:inline-block;width:450px;">
              [ 一步步教你实现一个todomvc(基于Regularjs) ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by 拴萝卜的棍子</span>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/A-day-to-learn-JavaScript-Back-to-Black-the-black-box-about-JavaScript-driven-development-model" style="display:inline-block;width:450px;">
              [ Back to Black，谈谈JavaScript中的黑盒驱动开发模式 ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by 张小俊128</span>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/Promise-translation-JavaScript-Promise-devil-details" style="display:inline-block;width:450px;">
              [ 【翻译】JavaScript Promise 探微 ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by Malcolm</span>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/Nodejs-abnormal-laboratory-raspberry-PI-Nodejs" style="display:inline-block;width:350px;">
              [ 树莓派上的Node.js ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by 游戏阿柴</span>
      </div>
  </div>
</div>
  <div class="title" style="font-size:14px;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-bottom:1px solid #ddd;line-height:30px;margin-top:20px;padding-left:5px;color:#888;">前端乱炖·招聘季</div>
  <div style="margin: 0px auto 0; width: 600px;padding-top:20px;" class="wrapper">
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/job/86">上海携程UED CSSer</a></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/job/83">招前端伙伴，我们玩 jq, avalon, angular, polymer, nodejs（15~30K）* 16薪 </a></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/job/82">高逼格互联网创业团队诚邀前端开发创业伙伴！</a></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/job/76">阿里巴巴娱乐事业群 - 虾米音乐 - 前端开发工程师</a></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/job/69">【北京】诚聘node.js后端开发（15-25K，期权）</a></div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/job/62">worktile求Web前端架构师</a></div>
  </div>
  <div class="title" style="font-size:14px;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-bottom:1px solid #ddd;line-height:30px;margin-top:20px;padding-left:5px;color:#888;">前端乱炖·业内优秀文章精选</div>
<div id="newsletter" >
  <div style="margin: 0px auto 0; width: 600px;padding-top:20px;" class="wrapper">
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a style="font-size:14px;display:inline-block;width:450px;" href="http://www.html-js.com/blog/2538">[译] HTML5 prefetch</a></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a style="font-size:14px;display:inline-block;width:450px;" href="http://www.html-js.com/blog/2539">Web Components标准中文版</a> </div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a style="font-size:14px;display:inline-block;width:450px;" href="https://github.com/substack/stream-handbook">node streams handbook</a> </div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a style="font-size:14px;display:inline-block;width:450px;" href="https://github.com/tiimgreen/github-cheat-sheet/blob/master/README.zh-cn.md">GitHub秘籍 中文版本</a></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a style="font-size:14px;display:inline-block;width:450px;" href="http://www.html-js.com/blog/2540">cookie窃取和session劫持</a></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a style="font-size:14px;display:inline-block;width:450px;" href="http://www.html-js.com/blog/2541">thinkjs - 基于Promise的Node.js MVC框架</a> </div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a style="font-size:14px;display:inline-block;width:450px;" href="http://www.html-js.com/blog/2542">Gulp 入门教程</a> </div>


  </div>
</div>
<div class="title" style="font-size:18px;font-weight:bold;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-left:4px solid #4e9d7e;margin-top:20px;padding-left:5px;line-height:20px;">微信公众号</div>
    <div style="margin: 0px auto 0; width: 600px;" class="wrapper">
      <img width="250" style="" src="http://htmljs.b0.upaiyun.com/uploads/1394040251862-qrcode.png"/>
      <div style="clear:both;"></div>
    </div>
  </div>
  <div style="font-size:18px;font-weight:bold;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;margin-top:20px;padding-left:5px;line-height:20px;" class="wrapper">
 <div style="background: none repeat scroll 0 0 #FFFFFF;  margin: 0px 0 0; padding: 20px 0;">
  <p class="title"  style="border-top:1px solid #ddd;font-size:12px;padding-top:10px;color:#999;"><a href="http://www.html-js.com">@前端乱炖 </a> 是一个功能丰富的提供高质量内容的技术社区</p>
     <p style="border-top:1px solid #ddd;font-size:12px;padding-top:10px;color:#999;" class="title" ><a href="http://www.html-js.com">行业合作请联系QQ：676588498 注明：乱炖合作</p>
<p style="border-top:1px solid #ddd;font-size:12px;padding-top:5px;color:#999;" class="title" >为了确保您能收到及时的通知，请将 postmaster@htmljs.sendcloud.org 添加为联系人。</p>
<script type="text/javascript">
(function(){
var url = "http://widget.weibo.com/distribution/comments.php?width=0&url=auto&border=1&brandline=y&fontsize=12&ralateuid=1734409185&appkey=659341943&dpc=1";
url = url.replace("url=auto", "url=" + encodeURIComponent(document.URL)); 
document.write('<iframe id="WBCommentFrame" src="' + url + '" scrolling="no" frameborder="0" style="width:100%"></iframe>');
})();
</script>
<script src="http://tjs.sjs.sinajs.cn/open/widget/js/widget/comment.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.WBComment.init({
    "id": "WBCommentFrame"
});
</script>
   </div>
  </div>
</div>
   <script src="http://htmljs.b0.upaiyun.com//js/jquery.js"/></script>
<script>
$("#submit").on("click",function(){
  $.ajax({
    url:"/rss/email",
    type:"post",
    data:{email:$("#email").val()},
    dataType:"json",
    success:function(data){
      if(data.success){
        alert("订阅成功")
        $("#email").val("")
      }else{
        alert(data.info)
      }
    }
    });
  });
</script>


<script>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36222024-3']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();</script>
  </body>
</html>